import React from 'react'
import AwesomeSwiper from 'react-awesome-swiper';
import {Link} from 'react-router-dom'
import MiniPlayView from '../MiniPlayView'
import '../../assets/css/Recommend.css'

import { RecCon,SongCon } from '../../http'
const config = {
    loop: true,
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
    },
    // Disable preloading of all images
    preloadImages: false,
    // Enable lazy loading
    lazy: true,
    speed: 500,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
        bulletElement: 'li',
        hideOnClick: true,
        clickable: true,
    },
    on: {
        slideChange: function () {
            // console.log(this.activeIndex);
        },
    },
};

class Recommend extends React.Component {
    swiperRef = null;
    goNext = () => {//use `this.swiperRef.swiper` to get the instance of Swiper
        this.swiperRef.swiper.slideNext();
    }
    constructor() {
        super();
        this.state = {
            // banner图
            bannerArr: [],
            // 推荐歌单
            recPlayList: [],
            // 推荐歌曲
            newSongList:[]
        }
    }
    render() {
        return (
        <div id='RecomCom' key='RecomCom' className='animate__animated'>
            <AwesomeSwiper ref={ref => (this.swiperRef = ref)} config={config} className="banner_box">
                <div className="swiper-wrapper">
                    {
                        this.state.bannerArr.map(item => {
                            return (
                                <div key={item.bannerId} className="swiper-slide">
                                    <img src={item.pic} />
                                </div>
                            )
                        })
                    }
                </div>
                <div className="swiper-button-prev"></div>{/* <!--左箭头--> */}
                <div className="swiper-button-next"></div>{/* <!--右箭头--> */}
                <div className="swiper-pagination"></div>
            </AwesomeSwiper>
            {/* // 推荐歌单 */}
            <div className='tjgd'>
                <div className='modeltitle'>推荐歌单</div>
                <div className='tjgdList'>
                    {
                        this.state.recPlayList.map(item => {
                            return (
                                <div key={item.id} className='playListItem'>
                                    <Link to={'/playlist/'+item.id}>
                                        <img src={item.picUrl} />
                                        <span>{item.name}</span>
                                    </Link>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <div className='newMusic'>
                <div className='modeltitle'>最新音乐</div>
                <div className='musicList'>
                    <ul>
                    {
                        this.state.newSongList.map(item => {
                            return (
                                <li key={item.id} className='songListItem' onClick={this.$play.bind(this,item)}>
                                    <div className='itemCon'>
                                        <img src={item.picUrl} />
                                        <span className='songInfo'>
                                            <p className='songName'>{item.name}</p>
                                            <p className='artists'>
                                                {
                                                    item.song.artists.map(artItem=>{
                                                        return <span key={artItem.id}>{artItem.name}</span>
                                                    })
                                                }
                                                -&nbsp;
                                                {
                                                    item.song.album.name
                                                }
                                            </p>
                                        </span>
                                    </div>
                                </li>
                            )
                        })
                    }
                    </ul>
                </div>
            </div>
            {/* <MiniPlayView songInfo={}></MiniPlayView> */}
        </div>)
    }
    componentDidMount() {
        RecCon.getBanner(res => {
            this.setState({
                bannerArr: res.data.banners
            });
        });
        RecCon.getPersonalized(6, res => {
            this.setState({
                recPlayList: res.data.result
            });
        });
        RecCon.getNewSong(res=>{
            console.log(res.data.result)
            this.setState({
                newSongList:res.data.result
            })
        })
        this.$('#RecomCom').addClass('animate__fadeIn');
    }
    componentWillUnmount(){
        // this.$('#RecomCom').removeClass('animate__flipInY');
        // this.$('#RecomCom').addClass('animate__flipOutY');
    }
}

export default Recommend;